<template>
    <div class="user-nav">
      <el-menu
        :default-active="activeTab"
        class="nav-menu"
        @select="handleSelect"
      >
        <el-menu-item index="address">
          <el-icon><Location /></el-icon>
          <span>收货地址</span>
        </el-menu-item>
        <el-menu-item index="favorites">
          <el-icon><Star /></el-icon>
          <span>我的收藏</span>
        </el-menu-item>
        <el-menu-item index="security">
          <el-icon><Lock /></el-icon>
          <span>账户安全</span>
        </el-menu-item>
        <el-menu-item index="quick">
          <el-icon><Menu /></el-icon>
          <span>快捷入口</span>
        </el-menu-item>
      </el-menu>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue'
  import {
    Location,
    Star,
    Lock,
    Menu
  } from '@element-plus/icons-vue'
  
  defineProps({
    activeTab: {
      type: String,
      default: 'address'
    }
  })
  
  const emit = defineEmits(['tab-change'])
  
  const handleSelect = (index) => {
    emit('tab-change', index)
  }
  </script>
  
  <style scoped>
  .user-nav {
    width: 220px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(255, 165, 0, 0.1);
  }
  
  .nav-menu {
    border-right: none;
  }
  
  .nav-menu :deep(.el-menu-item) {
    height: 50px;
    line-height: 50px;
  }
  
  .nav-menu :deep(.el-menu-item.is-active) {
    color: #ff9500;
    background-color: #fff5e6;
  }
  </style>